<template>
    <div>
        <!--<div style="color: red" >管理人暂未发布相关入座信息</div>-->
        <div>
            <!-- <div style="margin-top: 5% ;margin-bottom: 5%">会议描述 ：
                 <span>{{videos.description}}</span></div>
             <hr size=8 style="COLOR: #ffd306;border-style:outset;width:100%;color:#CCC">
             <div v-for="(url, index) in videos.linkUrl">
                 <el-button v-if="url!=''" type="text" @click="toUrl(url)" plain>在线视频直播入口{{index+1}}</el-button>
             </div>
             <i class="el-icon-warning" style="display: block;margin-top:3%"> 您也可以通过以下网址访问电脑PC端 </i>
             <div v-for="(url, index) in videos.linkUrl">
                 <span v-if="url!=''" >网址{{index+1}}：{{url}} </span>
              </div>-->
            <div style="text-indent:2em;;line-height: 27px;margin-top: 5%;">如果您选择通过融e联参加在线会议，不需要入座。
                如果您想要参加现场会议，通过下方的入座功能进行入座，入座成功将<span style="font-weight:bold;color: red">失去线上签到的权利。</span></div>
        </div>
        <el-dialog
                :title="form.name"
                :visible.sync="centerDialogVisible"
                width="80%">
            <el-form :model="form">
                <el-form-item label="详细地址 ：">
                    <span>{{form.address}}</span>
                </el-form-item>
                <!-- <el-form-item label="详细地址 ：">
                     <span>{{form.description}}</span>
                 </el-form-item>-->
                <el-form-item label="可入座总数 ：">
                    <span>{{form.seatNum}}</span>
                </el-form-item>
                <el-form-item label="入座开始时间 ：">
                    <span>{{form.startTime}}</span>
                </el-form-item>
                <el-form-item label="入座结束时间 ：">
                    <span>{{form.endTime}}</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-table style="margin-top: 5%" v-loading="loading" :data="siteList" border @cell-click="onSeatClick">
            <el-table-column
                    prop="name"
                    label="会议场所"
                    width="">
            </el-table-column>
            <!--<el-table-column-->
                    <!--prop="time"-->
                    <!--label="入座时间"-->
                    <!--width="150">-->
            <!--</el-table-column>-->
            <el-table-column
                    prop="remainderSeatNum"
                    label="剩余座位"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="stateStr"
                    label="是否入座"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="操作"
                    width="70">
                <template slot-scope="scope">
                    <el-button @click="goSeat(scope.row)" type="text" size="medium"
                               :disabled="scope.row.state==='入座' && scope.row.remainderSeatNum<=0"> {{scope.row.state}}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import util from 'assets/js/util.js'
    import conf from 'assets/js/conf.js'
    import SockJS from 'sockjs-client';
    import Stomp from 'webstomp-client';

    export default {
        data() {
            return {
                centerDialogVisible: false,
                loading: false,
                state: '',
                form: {},
                client: null,
                currentSeat: null,
            }
        },
        mounted() {
            this.meetingId = util.getUrlParam(document.location.href, 'meetingId');
        },
        props: [
            'siteList'
        ],
        created() {
            // this.initWebSocket();
        },
        beforeDestroy() {
            // this.closeWebSocket();
        },
        methods: {
            goSeat: function (row) {
                const _self = this;
                _self.loading = true;
                if (row.state === "弃座") {
                    util.ajax({
                        url: '/meeting/place/discardSeat',
                        params: {meetingId: this.meetingId, placeId: row.id},
                        success: function (data) {
                            if (data.status === 200){
                                _self.currentSeat = row;
                                alert(data.data);
                                setTimeout(() => {
                                    location.reload()
                                }, 5000);
                            }
                            else {
                                alert(data.message);
                                _self.loading = false;
                            }
                        },
                    });
                } else {
                    util.ajax({
                        url: '/meeting/place/grabSeat',
                        params: {meetingId: this.meetingId, placeId: row.id},
                        success: function (data) {
                            if (data.status === 200){
                                _self.currentSeat = row;
                                alert(data.data);
                                setTimeout(() => {
                                    location.reload()
                                }, 5000);
                            }
                            else {
                                alert(data.message);
                                _self.loading = false;
                            }
                        },
                    });
                }
            },
            goState: function (type) {
                let typeText = '';
                switch (type) {
                    case 0:
                        typeText = '入座';
                        break;
                    case 1:
                        typeText = '弃座';
                        break;
                    default:
                        break
                }
                return typeText
            },
            goStateStr: function (type) {
                let typeText = '';
                switch (type) {
                    case 0:
                        typeText = '未入座';
                        break;
                    case 1:
                        typeText = '已入座';
                        break;
                    default:
                        break
                }
                return typeText
            },
            onSeatClick: function (row, column, cell, event) {
                const _self = this;
                if (column.width !== 70) {
                    util.ajax({
                        url: '/meeting/place/info',
                        params: {meetingPlaceId: row.id},
                        success: function (data) {
                            _self.form.address = data.data.address;
                            _self.form.name = data.data.name;
                            _self.form.remainderSeatNum = data.data.remainderSeatNum;
                            _self.form.seatNum = data.data.seatNum;
                            _self.form.state = _self.goState(data.data.state);
                            _self.form.startTime = util.formatDateDetail(data.data.startTime);
                            _self.form.endTime = util.formatDateDetail(data.data.endTime);
                            _self.centerDialogVisible = true;
                        },
                    });
                }
            },
            initWebSocket() {
                let socket = new SockJS(conf.baseUrl + "/endpoint");
                this.client = Stomp.over(socket);
                const _self = this;
                this.client.connect({}, (frame) => {
                    this.client.subscribe('/getSeatNum/' + this.meetingId, (tick) => {
                        let result = JSON.parse(tick.body);
                        result.grabSeatNotices.forEach(seat => {
                            _self.siteList.forEach(_seat => {
                                if (_seat.id === seat.id) {
                                    _seat.remainderSeatNum = seat.num;
                                }
                            })
                        });
                        let deleteData = _self.siteList.splice(0, _self.siteList.length);
                        deleteData.forEach(_seat => {
                            _self.siteList.push(_seat);
                        })
                    });
                    this.client.subscribe('/getGrabResponse/' + util.getUrlParam(document.location.href, 'creditorId'), (tick) => {
                        let result = JSON.parse(tick.body);
                        if (result.result === true) {
                            if (_self.currentSeat.state === "入座") {
                                alert("入座成功");
                                _self.currentSeat.state = "弃座";
                            } else {
                                alert("弃座成功");
                                _self.currentSeat.state = "入座";
                            }
                        }
                        _self.loading = false;
                    });
                }, (error) => {
                    console.log(error);
                });
            },
            closeWebSocket() {
                if (this.client) {
                    this.client.disconnect()
                }
            },
        }
    }
</script>

<style>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>
